import 'package:app/components/TimeView.dart';
import 'package:app/icons/icons.dart';
import 'package:app/model/app_config.dart';
import 'package:app/model/model.dart';
import 'package:app/router/router.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class UpdateImgurl extends StatefulWidget with RouterBridge<ChildrenEvent> {
  const UpdateImgurl({super.key});
  @override
  State<UpdateImgurl> createState() => _UpdateImgurlState();
}

class _UpdateImgurlState extends State<UpdateImgurl> {
  static const name = "某天";
  final Map<String, dynamic> _dartMap = {
    "childrenId": "",
    "name": name,
    "parentId": "1",
    "targetTimestamp": DateTime.now().millisecondsSinceEpoch,
    "isprecise": false,
    "whetherToTop": false,
    "eventColor": StaticAppConfig.defaultEventColor,
  };
  late final Rx<ChildrenEvent> event;
  var _isInitialized = false;
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (!_isInitialized) {
      final args = widget.argumentsOf(context);
      if (args != null) {
        event = args.obs;
        if (args.name.isEmpty) {
          event.value.name.value = name;
        }
      } else {
        event = ChildrenEvent.fromJson(_dartMap).obs;
      }
      _isInitialized = true;
    }
  }

  String _generateFontColorId(Color color) {
    var r = color.toARGB32();
    if (r == Colors.black.toARGB32()) {
      return "1";
    }
    return "0";
  }

  Color _getColor(String colorId) {
    if (colorId == "0") {
      return Colors.white;
    }

    return Colors.black;
  }

  Widget spacer({double height = 10}) {
    return SizedBox(height: height);
  }

  Widget gaussianBlur() {
    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          Align(
            alignment: Alignment.centerLeft,
            child: Text("模糊图片", style: TextStyle(color: Colors.white)),
          ),
          spacer(height: 5),
          Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(AppIcons.definition, color: Colors.white),
              Expanded(
                child: TDSlider(
                  value: event.value.blurRadius.value,
                  sliderThemeData: TDSliderThemeData(
                    activeTrackColor: Colors.green,
                    inactiveTrackColor: Colors.red,
                    context: context,
                    min: 0,
                    max: 10,
                  ),
                  boxDecoration: BoxDecoration(color: Colors.transparent),
                  onChanged: (value) {
                    event.value.blurRadius.value = value;
                  },
                ),
              ),
              Icon(AppIcons.ambiguity, color: Colors.white),
            ],
          ),
        ],
      ),
    );
  }

  Widget fontColor() {
    return TDCell(
      title: '字体颜色',
      hover: false,
      style: TDCellStyle(
        backgroundColor: Colors.transparent,
        titleStyle: TextStyle(color: Colors.white),
      ),
      descriptionWidget: TDRadioGroup(
        selectId: _generateFontColorId(event.value.textColor.value),
        direction: Axis.horizontal,
        onRadioGroupChange: (selectedId) {
          if (selectedId == null) return;
          event.value.textColor.value = _getColor(selectedId);
        },
        directionalTdRadios: const [
          TDRadio(
            id: '0',
            title: '白色',
            showDivider: false,
            backgroundColor: Colors.transparent,
            titleColor: Colors.white,
          ),
          TDRadio(
            id: '1',
            title: '黑色',
            showDivider: false,
            backgroundColor: Colors.transparent,
            titleColor: Colors.white,
          ),
        ],
      ),
    );
  }

  Widget buttons() {
    return Row(
      children: [
        Expanded(
          child: TDButton(
            text: '取消',
            size: TDButtonSize.large,
            type: TDButtonType.fill,
            shape: TDButtonShape.rectangle,
            theme: TDButtonTheme.light,
            onTap: () {
              Navigator.maybePop(context);
            },
          ),
        ),
        SizedBox(width: 16),
        Expanded(
          child: TDButton(
            text: '确认',
            size: TDButtonSize.large,
            type: TDButtonType.fill,
            shape: TDButtonShape.rectangle,
            theme: TDButtonTheme.primary,
            onTap: () {
              Navigator.maybePop(context, event.value);
            },
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TDNavBar(
        height: 48,
        title: "选择背景图片",
        titleColor: Colors.white,
        centerTitle: false,
        backgroundColor: StaticAppConfig.appBarColor,
        titleFontWeight: FontWeight.w600,
        useDefaultBack: false,
        screenAdaptation: true,
        leftBarItems: [
          TDNavBarItem(
            icon: Icons.chevron_left,
            iconColor: Colors.white,
            action: () {
              Navigator.maybePop(context);
            },
          ),
        ],
      ),
      body: SizedBox.expand(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/background/wood_pattern.jpg"),
              fit: BoxFit.cover,
            ),
          ),
          padding: const EdgeInsets.only(
            left: 15,
            right: 15,
            bottom: 24,
            top: 30,
          ),
          child: Column(
            children: [
              Obx(() {
                return TimeView(childrenEvent: event.value, disableTap: true);
              }),
              spacer(),
              gaussianBlur(),
              spacer(),
              fontColor(),
              Expanded(child: SizedBox.shrink()),
              buttons(),
            ],
          ),
        ),
      ),
    );
  }
}
